<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :close-on-click-modal="false"
    :before-close="handleCancel"
  >
    <div class="box-text">
      <!--  style="{ width: !isUploadOk ? 100% : 33% }" -->
      <div class="input1">
        <div class="info">
          <div class="hint1">要上传的数据：{{ model.input1 }} 条</div>
          <el-button type="primary" plain round size="small" icon="el-icon-document" @click="thisTxtDown(1)">txt下载</el-button>
        </div>
        <el-input v-model="model.classNameList" type="textarea" :rows="26" placeholder="请输入" @input="txtInput(1)" />
      </div>
      <div v-if="isUploadOk" class="input2">
        <div class="info">
          <div class="hint2">上传成功的数据：{{ model.input2 }} 条</div>
          <el-button type="primary" plain round size="small" icon="el-icon-document" @click="thisTxtDown(2)">txt下载</el-button>
        </div>
        <el-input v-model="model.classNameListOK" type="textarea" :rows="26" placeholder="请输入" @input="txtInput(2)" />
      </div>
      <div v-if="isUploadOk" class="input3">
        <div class="info">
          <div class="hint3">失败重复的数据：{{ model.input3 }} 条</div>
          <el-button type="primary" plain round size="small" icon="el-icon-document" @click="thisTxtDown(3)">txt下载</el-button>
        </div>
        <el-input v-model="model.classNameListCF" type="textarea" :rows="26" placeholder="请输入" @input="txtInput(3)" />
      </div>
    </div>
    <span slot="footer">
      <el-button @click="modelClose">关 闭</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { apiPasteUpload } from '@/api/GetNumberBusiness'
import { txtDown } from '@/utils'
export default {
  components: {},
  data() {
    return {
      model: {
        input1: 0,
        input2: 0,
        input3: 0
      },
      refName: 'ruleForm',
      visible: false,
      title: '粘贴批量上传',
      width: '300px',
      numClass: '',
      isUploadOk: false, // 是否上传完毕
      rules: {
        className: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {
    isUploadOk: {
      handler(v) {
        if (v) {
          this.width = '1000px'
        }
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    show() {
      this.$refs[this.refName]?.clearValidate()
      this.visible = true
    },
    txtInput(n) {
      console.log('txtInput n', n)
      if (n === 1) {
        this.$set(this.model, 'input1', this.testLegth(this.model.classNameList))
      } else if (n === 2) {
        this.$set(this.model, 'input2', this.testLegth(this.model.classNameListOK))
      } else if (n === 3) {
        this.$set(this.model, 'input3', this.testLegth(this.model.classNameListCF))
      }
    },
    submitForm() {
      console.log('表单数据', this.model)
      if (!this.model.classNameList) {
        this.$message.warning('请填入要上传的文本')
        return
      }
      this.$store.dispatch('app/setLoading', true)
      apiPasteUpload({ data: this.model.classNameList, numClass: this.numClass }).then((res) => {
        console.log('res', res)
        this.isUploadOk = true
        if (res.data.oknum) {
          this.$set(this.model, 'classNameListOK', res.data.oknum)
          this.$set(this.model, 'input2', this.testLegth(this.model.classNameListOK))
        } else {
          this.$set(this.model, 'classNameListOK', '')
          this.$set(this.model, 'input2', 0)
        }
        if (res.data.nonum) {
          this.$set(this.model, 'classNameListCF', res.data.nonum)
          this.$set(this.model, 'input3', this.testLegth(this.model.classNameListCF))
        } else {
          this.$set(this.model, 'classNameListCF', '')
          this.$set(this.model, 'input3', 0)
        }
        if (res.code === 1) {
          this.$emit('ok')
          this.$message.success(res.message || '操作成功！')
        } else {
          this.$message.warning(res.message || '操作失败！')
        }
      }).finally(() => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    // 计算长度
    testLegth(text) {
      return text.trim().split(/\r?\n\s*/).length
    },
    // txt下载
    thisTxtDown(n) {
      let data
      if (n === 1) {
        data = this.model.classNameList
        txtDown('要上传的数据', data)
      } else if (n === 2) {
        data = this.model.classNameListOK
        txtDown('上传成功的数据', data)
      } else if (n === 3) {
        data = this.model.classNameListCF
        txtDown('上传失败重复的数据', data)
      }
      console.log('下载内容', data)
    },
    modelClose() {
      this.visible = false
    },
    handleCancel(done) {
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.box-text{
  display: flex;
  justify-content: space-between;
  height: 600px;
  .input1,.input2,.input3{
    width: 260px;
    .el-textarea{
      width: 260px;
    }
    .info{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }
    .hint1{
      color: #409eff;
    }
    .hint2{
      color: #67c23a;
    }
    .hint3{
      color: #e6a23c;
    }
  }
}
</style>
